{% extends "base.html" %}
{% load staticfiles %}
{% load i18n %}

{% block navigation %}
	<ul class="nav navbar-nav">
		<li><a href="{% url 'home' %}">Index</a></li>
		{% if user.is_authenticated %}
		  <li><a href="{% url 'import' %}">Import</a></li>
        {% endif %}
		<li>
		{% if user.is_authenticated %}
          <a href="{% url 'accounts_logout' %}" target="parent" title="Logout">{% trans "<< Logout >>" %}</a>
        {% else %}
          <a href="{% url 'accounts_login' %}" target="parent" title="Login">{% trans "<< Login >>" %}</a>
        {% endif %}
		</li>
	</ul>
{% endblock %}

{% block extrastyle %}
	<link rel="stylesheet" href="{% static 'style.css' %}">
{% endblock %}

{% block extrajs %}
	<script>$(document).ready(function () {setVNClass("{{cls}}");});</script>
{% endblock %}

{% block content %}

<!-- MAIN-CLASS BEGIN -->
    <div id="mainClassModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mainClassModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="mainClassModalLabel">VN Class Editor - Primary data</h4>
          </div>
          <div class="modal-body">
            <form id="main_classform" class="form-horizontal" role="form" accept-charset="UTF-8" action="{% url 'data' %}" data-remote="true" method="post"> 
              {% csrf_token %}
              <input type="hidden" name="id" value="{{cls.id}}" />
              <input type="hidden" name="datatype" value="vnclass" />
              
              <div class="form-group">
                <label for="vnc_prefix" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="vnc_prefix" name="vnc_prefix" placeholder="Name" value="{{cls.prefix}}" />
                </div>
              </div>
              
              <div class="form-group">
                <label for="vnc_number" class="col-sm-2 control-label">Number</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="vnc_number" name="vnc_number" placeholder="Number" value="{{cls.number}}" />
                </div>
              </div>

              <div class="form-group">
                <div class="col-sm-2 text-right"><strong>Status</strong></div>
                <div class="col-sm-10"><span>{{cls.status}}</span></div>
              </div>

              <div class="form-group">
                <div class="col-sm-2 text-right"><strong>Version</strong></div>
                <div class="col-sm-10"><span>{{cls.version}}</span></div>
              </div>
              
              {% if cls.modified_by %}
              <div class="form-group">
                <div class="col-sm-2 text-right"><strong>Changed</strong></div>
                <div class="col-sm-10"><span> by {{cls.modified_by}}</span></div>
              </div>
              {% endif %}
              
            </form>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <input class="btn btn-primary" name="commit" type="submit" value="Save" form="main_classform" />
          </div>          

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<!-- MAIN-CLASS END -->
    
<!-- DEL-CLASS BEGIN -->
    <div id="delClassModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="delClassModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="delClassModalLabel">VN Class remover</h4>
          </div>
          <div class="modal-body">
            <form id="del_classform" class="form-horizontal" role="form" accept-charset="UTF-8" action="{% url 'data' %}" data-remote="true" method="post"> 
              {% csrf_token %}
              <input type="hidden" name="id" value="{{cls.id}}" />
              <input type="hidden" name="datatype" value="vnclass" />
              <div class="alert alert-danger"><strong>Warning!</strong><br/>Are You sure that You want to delete the verb class <strong>{{cls.name}}</strong>?</div>
            </form>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <input class="btn btn-primary" name="commit" type="submit" value="Delete" form="del_classform" />
          </div>          

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<!-- DEL-CLASS END -->
    
<!-- UPD-MEMBER BEGIN -->
    <div id="updMemberModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="updMemberModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="updMemberModalLabel">VN Class Member Editor</h4>
          </div>
          <div class="modal-body">
            <form id="upd_memberform" class="form-horizontal" role="form" accept-charset="UTF-8" action="{% url 'data' %}" data-remote="true" method="post"> 
              {% csrf_token %}
              <input type="hidden" id="id" name="id" value="" />
              <input type="hidden" id="member_id" name="member_id" value="" />
              <input type="hidden" name="datatype" value="member" />
              
              <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="name" name="name" placeholder="Name" value="" />
                </div>
              </div>
              
              <div class="form-group">
                <label for="wn" class="col-sm-2 control-label">WN key</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="wn" name="wn" placeholder="WordNet key" value="" />
                </div>
              </div>

              <div class="form-group">
                <label for="locwn" class="col-sm-2 control-label">LWN key</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="locwn" name="locwn" placeholder="Local WordNet key" value="" />
                </div>
              </div>

              <div class="form-group">
                <label for="grouping" class="col-sm-2 control-label">Grouping</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="grouping" name="grouping" placeholder="Grouping" value="" />
                </div>
              </div>
              
            </form>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <input class="btn btn-primary" name="commit" type="submit" value="Save" form="upd_memberform" />
          </div>          

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<!-- UPD-MEMBER END -->

<!-- DEL-MEMBER BEGIN -->
    <div id="delMemberModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="delMemberModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="delMemberModalLabel">VN Class Member remover</h4>
          </div>
          <div class="modal-body">
            <form id="del_memberform" class="form-horizontal" role="form" accept-charset="UTF-8" action="{% url 'data' %}" data-remote="true" method="post"> 
              {% csrf_token %}
              <input type="hidden" id="id" name="id" value="" />
              <input type="hidden" id="member_id" name="member_id" value="" />
              <input type="hidden" id="datatype" name="datatype" value="member" />
              <div class="alert alert-danger"><strong>Warning!</strong><br/>Are You sure that You want to delete the verb class member <strong><span id="delObjectName"></span></strong>?</div>
            </form>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <input class="btn btn-primary" name="commit" type="submit" value="Delete" form="del_memberform" />
          </div>          

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<!-- DEL-MEMBER END -->
 
<!-- UPD-ROLE BEGIN -->
    <div id="updRoleModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="updRoleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="updRoleModalLabel">VN Class Role Editor</h4>
          </div>
          <div class="modal-body">
            <form id="upd_roleform" class="form-horizontal" role="form" accept-charset="UTF-8" action="{% url 'data' %}" data-remote="true" method="post"> 
              {% csrf_token %}
              <input type="hidden" id="id" name="id" value="" />
              <input type="hidden" id="role_id" name="role_id" value="" />
              <input type="hidden" name="datatype" value="role" />
              
              <div class="form-group">
                <label for="role" class="col-sm-2 control-label">Type</label>
                <div class="col-sm-10">
                  <select type="text" class="form-control" id="role" name="role" placeholder="Thematic Role Type" value="">
                    {% for r in roles %}
                    <option value="{{r}}">{{r}}</option>
                    {% endfor%}
                  </select>
                </div>
              </div>
              
              <div class="form-group">
                <label for="position" class="col-sm-2 control-label">Position</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="position" name="position" placeholder="Position" value="" />
                </div>
              </div>

              <div class="form-group">
                <label for="role_restr" class="col-sm-2 control-label">Selection restrictions</label>
                <div class="col-sm-10">
                  <textarea class="form-control" rows="3" id="role_restr" name="role_restr" placeholder="Selection restrictions" value="">
                  </textarea>
                </div>
              </div>

            </form>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <input class="btn btn-primary" name="commit" type="submit" value="Save" form="upd_roleform" />
          </div>          

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<!-- UPD-ROLE END -->

<!-- DEL-ROLE BEGIN -->
    <div id="delRoleModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="delRoleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="delRoleModalLabel">VN Class Role remover</h4>
          </div>
          <div class="modal-body">
            <form id="del_roleform" class="form-horizontal" role="form" accept-charset="UTF-8" action="{% url 'data' %}" data-remote="true" method="post"> 
              {% csrf_token %}
              <input type="hidden" id="id" name="id" value="" />
              <input type="hidden" id="role_id" name="role_id" value="" />
              <input type="hidden" id="datatype" name="datatype" value="role" />
              <div class="alert alert-danger"><strong>Warning!</strong><br/>Are You sure that You want to remove the verb class role <strong><span id="delObjectName"></span></strong>?</div>
            </form>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <input class="btn btn-primary" name="commit" type="submit" value="Delete" form="del_roleform" />
          </div>          

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<!-- DEL-ROLE END -->
 
<!-- UPD-FRAME BEGIN -->
    <div id="updFrameModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="updFrameModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="updFrameModalLabel">VN Class Syntax Frame Editor</h4>
          </div>
          <div class="modal-body">
            <form id="upd_frameform" class="form-horizontal" role="form" accept-charset="UTF-8" action="{% url 'data' %}" data-remote="true" method="post"> 
              {% csrf_token %}
              <input type="hidden" id="id" name="id" value="" />
              <input type="hidden" id="frame_id" name="frame_id" value="" />
              <input type="hidden" name="datatype" value="frame" />

              <div class="panel panel-default">
                <div class="panel-heading">Description</div>
                <div class="panel-body">
                
                  <div class="form-group">
                    <label for="primary" class="col-sm-2 control-label">Primary</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="primary" name="primary" placeholder="Primary description" value="" />
                    </div>
                  </div>
              
                  <div class="form-group">
                    <label for="secondary" class="col-sm-2 control-label">Secondary</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="secondary" name="secondary" placeholder="Secondary description" value="" />
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="descriptionNumber" class="col-sm-2 control-label">Nr</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="descriptionNumber" name="descriptionNumber" placeholder="Description number" value="" />
                    </div>
                  </div>

                </div>
              </div>              

              <div class="form-group">
                <label for="xtag" class="col-sm-2 control-label">XTag</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="xtag" name="xtag" placeholder="XTag" value="" />
                </div>
              </div>

              <div class="form-group">
                <label for="example" class="col-sm-2 control-label">Example</label>
                <div class="col-sm-10">
                  <textarea class="form-control" rows="3" id="example" name="example" placeholder="Example sentence" value="">
                  </textarea>
                </div>
              </div>

            </form>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <input class="btn btn-primary" name="commit" type="submit" value="Save" form="upd_frameform" />
          </div>          

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<!-- UPD-FRAME END -->

<!-- DEL-FRAME BEGIN -->
    <div id="delFrameModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="delFrameModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="delFrameModalLabel">VN Class Syntax Frame remover</h4>
          </div>
          <div class="modal-body">
            <form id="del_frameform" class="form-horizontal" role="form" accept-charset="UTF-8" action="{% url 'data' %}" data-remote="true" method="post"> 
              {% csrf_token %}
              <input type="hidden" id="id" name="id" value="" />
              <input type="hidden" id="frame_id" name="frame_id" value="" />
              <input type="hidden" id="datatype" name="datatype" value="frame" />
              <div class="alert alert-danger"><strong>Warning!</strong><br/>Are You sure that You want to remove the verb class syntax frame <strong><span id="delObjectName"></span></strong>?</div>
            </form>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <input class="btn btn-primary" name="commit" type="submit" value="Delete" form="del_frameform" />
          </div>          

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<!-- DEL-FRAME END -->

<div class="syntaxRowTemplate" style="display: none;">
  <div class="form-group">
    <div class="col-sm-1 text-right"><span id="nr" name="nr">1</span></div>
    <div class="col-sm-3"><input type="text" class="form-control" id="type" name="type" placeholder="Type" value="VERB" /></div>
    <div class="col-sm-3"><input type="text" class="form-control" id="value" name="value" placeholder="Value" value="" /></div>
    <div class="col-sm-5"><textarea class="form-control" rows="2" id="restr" name="restr" placeholder="Syntax restrictions" value=""></textarea></div>
  </div>
</div>

<!-- UPD-SYNTAX BEGIN -->
    <div id="updSyntaxModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="updSyntaxModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="updSyntaxModalLabel">VN Class Syntax Template Editor</h4>
          </div>
          <div class="modal-body">
            <form id="upd_syntaxform" class="form-horizontal" role="form" accept-charset="UTF-8" action="{% url 'data' %}" data-remote="true" method="post"> 
              {% csrf_token %}
              <input type="hidden" id="id" name="id" value="" />
              <input type="hidden" id="syntax_id" name="syntax_id" value="" />
              <input type="hidden" name="datatype" value="syntax" />
              <div class="form-group">
                <label for="frameName" class="col-sm-1">Frame</label>
                <div class="col-sm-11"><span id="frameName"></span></div>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <div class="col-sm-1">
                    <label>
                      <input type="checkbox" id="isOrdered" name="isOrdered" placeholder="Is ordered" value="Yes" />Ordered
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">Sentence members</div>
                <div id="syntaxfields">
                  <div class="form-group">
                    <label class="col-sm-1 control-label">#</label>
                    <label class="col-sm-3 control-label" style="text-align:left;">Type</label>
                    <label class="col-sm-3 control-label" style="text-align:left;">Value</label>
                    <label class="col-sm-5 control-label" style="text-align:left;">Restrictions</label>
                  </div>
                </div>
                <button id="addSyntaxRow" type="button" class="ibtn btn-md"><span class="glyphicon glyphicon-plus"></span></button>
              </div>

            </form>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <input class="btn btn-primary" name="commit" type="submit" value="Save" form="upd_syntaxform" />
          </div>          

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<!-- UPD-SYNTAX END -->

<div class="semanticsRowTemplate" style="display: none;">
  <div class="form-group">
    <div class="col-sm-1"><input type="checkbox" id="invert" name="invert" placeholder="" value="No" style="margin-left:30px" /></div>
    <div class="col-sm-2"><input type="text" class="form-control" id="type" name="type" placeholder="Type" value="" /></div>
    <div class="col-sm-9"><input type="text" class="form-control" id="value" name="value" placeholder="Value" value="" /></div>
  </div>
</div>

<!-- UPD-SEMANTICS BEGIN -->
    <div id="updSemanticsModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="updSemanticsModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="updSemanticsModalLabel">VN Class Semantics Editor</h4>
          </div>
          <div class="modal-body">
            <form id="upd_semanticsform" class="form-horizontal" role="form" accept-charset="UTF-8" action="{% url 'data' %}" data-remote="true" method="post"> 
              {% csrf_token %}
              <input type="hidden" id="id" name="id" value="" />
              <input type="hidden" id="semantics_id" name="semantics_id" value="" />
              <input type="hidden" name="datatype" value="semantics" />
              <div class="form-group">
                <label for="frameName" class="col-sm-2 control-label">Frame</label>
                <div class="col-sm-10"><span id="frameName"></span></div>
              </div>

              <div class="panel panel-default">
                <div class="panel-heading">Sentence semantics</div>
                <div id="semanticsfields">
                  <div class="form-group">
                    <label class="col-sm-1 control-label" style="text-align:center;">NOT</label>
                    <label class="col-sm-2 control-label" style="text-align:left;">Predicate</label>
                    <label class="col-sm-9 control-label" style="text-align:left;">Parameters</label>
                  </div>
                </div>
                <button id="addSemanticsRow" type="button" class="ibtn btn-md"><span class="glyphicon glyphicon-plus"></span></button>
              </div>

            </form>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <input class="btn btn-primary" name="commit" type="submit" value="Save" form="upd_semanticsform" />
          </div>          

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<!-- UPD-SEMANTICS END -->


<div class="row">
  <div class="col-md-2"><h4 class="text-right">{% trans "Name" %}</h4></div>
  <div class="col-md-5">
    <h4>{{cls.name}} 
      {% if user.is_authenticated %}
      <button class="ibtn btn-md" data-toggle="modal" data-target="#mainClassModal"><span class="glyphicon glyphicon-edit"></span></button>
      <button class="ibtn btn-md" data-toggle="modal" data-target="#delClassModal"><span class="glyphicon glyphicon-remove"></span></button>
      {% endif %}
    </h4>
  </div>
  <div class="col-md-5"><p class="text-right">(ID = {{id}})</p></div>
</div>
{% if cls.subof %}
<div class="row">
  <div class="col-md-2"><p class="text-right">{% trans "Is subclass of" %}</p></div>
  <div class="col-md-10">
    {{cls.subof.name}} <a href="{% url 'data' %}?id={{cls.subof.id}}" target="parent"><span class="glyphicon glyphicon-eye-open"></span></a>
  </div>
</div>
{% endif %}
<div class="row">
  <div class="col-md-2"><p class="text-right">{% trans "Members" %}</p></div>
  <div class="col-md-10">
  {% if user.is_authenticated %}
    <button class="ibtn btn-md open-addMemberModal" data-toggle="modal" data-target="#updMemberModal" data-id="{{cls.id}}"><span class="glyphicon glyphicon-plus"></span></button>
  {% endif %}
  {% for mem in cls.members %}
    <script>document.write(verbalizeMember("{{mem}}"));</script>
    {% if user.is_authenticated %}
      <button class="ibtn btn-md open-updMemberModal" data-toggle="modal" data-target="#updMemberModal" data-id="{{mem.id}}"><span class="glyphicon glyphicon-edit"></span></button>
      <button class="ibtn btn-md open-delMemberModal" data-toggle="modal" data-target="#delMemberModal" data-id="{{mem.id}}"><span class="glyphicon glyphicon-remove"></span></button>
    {% endif %}
  {% endfor %}
  </div>
</div>
<div class="row">
  <div class="col-md-2"><p class="text-right">{% trans "Roles" %}</p></div>
  <div class="col-md-10">
  {% if user.is_authenticated %}
    <button class="ibtn btn-md open-addRoleModal" data-toggle="modal" data-target="#updRoleModal" data-id="{{cls.id}}"><span class="glyphicon glyphicon-plus"></span></button>
  {% endif %}
  {% for rol in cls.roles %}
    <p>{{rol.role}} <script>document.write(verbalizeRestriction("{{rol.restrs}}", true));</script>
      {% if user.is_authenticated %}
        <button class="ibtn btn-md open-updRoleModal" data-toggle="modal" data-target="#updRoleModal" data-id="{{rol.id}}"><span class="glyphicon glyphicon-edit"></span></button>
        <button class="ibtn btn-md open-delRoleModal" data-toggle="modal" data-target="#delRoleModal" data-id="{{rol.id}}"><span class="glyphicon glyphicon-remove"></span></button>
      {% endif %}
    </p>
  {% endfor %}
  </div>
</div>
<div class="row">
  <div class="col-md-2"><p class="text-right">{% trans "Syntax frames" %}</p></div>
  <div class="col-md-10">
  {% if user.is_authenticated %}
    <button class="ibtn btn-md open-addFrameModal" data-toggle="modal" data-target="#updFrameModal" data-id="{{cls.id}}"><span class="glyphicon glyphicon-plus"></span></button>
  {% endif %}
  {% for frm in cls.frames %}
    <p><strong>{{frm.primary}}</strong> - {{frm.secondary}}
      {% if user.is_authenticated %}
        <button class="ibtn btn-md open-updFrameModal" data-toggle="modal" data-target="#updFrameModal" data-id="{{frm.id}}"><span class="glyphicon glyphicon-edit"></span></button>
        <button class="ibtn btn-md open-delFrameModal" data-toggle="modal" data-target="#delFrameModal" data-id="{{frm.id}}"><span class="glyphicon glyphicon-remove"></span></button>
      {% endif %}
    </p>
    <div class="row">
      <div class="col-md-2"><p class="text-right">{% trans "Example" %}</p></div>
      <div class="col-md-10">
        <p><i>{{frm.example}}</i></p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2"><p class="text-right">{% trans "Syntax" %}</p></div>
      <div class="col-md-10">
        <p><script>document.write(verbalizeSyntax("{{frm.syntax}}"));</script>
        {% if user.is_authenticated %}
          <button class="ibtn btn-md open-updSyntaxModal" data-toggle="modal" data-target="#updSyntaxModal" data-id="{{frm.id}}"><span class="glyphicon glyphicon-edit"></span></button>
        {% endif %}
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2"><p class="text-right">{% trans "Semantics" %}</p></div>
      <div class="col-md-10">
        <p><script>document.write(verbalizeSemantics("{{frm.semantics}}"));</script>
        {% if user.is_authenticated %}
          <button class="ibtn btn-md open-updSemanticsModal" data-toggle="modal" data-target="#updSemanticsModal" data-id="{{frm.id}}"><span class="glyphicon glyphicon-edit"></span></button>
        {% endif %}
        </p>
      </div>
    </div>
  {% endfor %}
  </div>
</div>
<div class="row">
  <div class="col-md-2"><p class="text-right">{% trans "Subclasses" %}</p></div>
  <div class="col-md-10">
    {% if user.is_authenticated %}
      <button class="ibtn btn-md open-addSubclassModal" data-toggle="modal" data-target="#addSubclassModal" data-id="{{cls.id}}"><span class="glyphicon glyphicon-plus"></span></button>
    {% endif %}
    {% for sub in cls.subclasses %}
    <p>{{sub.name}} <a href="{% url 'data' %}?id={{sub.id}}" target="parent"><span class="glyphicon glyphicon-eye-open"></span></a></p>
    {% endfor %}
  </div>
</div>

{% endblock %}

{% block footer %}
<p class="text-center credit"></p>
{% endblock %}